<template>
	<view class="yoyo_cards" >
		<block v-if="dataList && dataList.length > 0">
			<view class="selected_li" @click="jumpDetails(item)" v-for="(item,index) in dataList" :key="item.id">
				<view class="li_header">
					<image class="header_img" :src="item.cover" mode="widthFix"></image>
					<!-- 直接购买 -->
					<block v-if="item.issueType == 1">
						<!-- 已售罄 -->
						<view class="title colo_C5C5C5" v-if="item.sellStatus == 4">
							<image class="time_img" src="/static/index/index-time01.png" ></image>
							<text>已售罄</text>
						</view>
						<!-- 热销中 -->
						<view class="title colo_F61616" v-else-if="item.sellStatus == 2">
							<image class="time_img" src="/static/index/index-fire.png" ></image>
							<text>热销中</text>
						</view>
						<view class="title colo_E6C935" v-else-if="item.sellStatus == 1">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<block v-if="item.time.timeStatus">
								<text>即将开售</text>
							</block>
							<block v-else>
								<text>敬请期待</text>
							</block>
							<text class="time_word">{{item.startTime.substr(5,item.startTime.length-8)}}</text>
						</view>
					</block>
					<!-- 预约申购 -->
					<block v-else-if="item.issueType == 2">
						<!-- 正在抽签中 -->
						<view class="title colo_E6C935" v-if="item.draw">
							<image class="time_img" src="/static/index/index-calendar.png" ></image>
							<text>正在抽签</text>
						</view>
						<view class="title colo_F61616" v-else-if="item.sellStatus == 6">
							<image class="time_img" src="/static/index/index-fire.png" ></image>
							<text>火爆预约中</text>
						</view>
						
						<view class="title colo_E6C935" v-else-if="item.sellStatus == 5">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<text>即将开放预约</text>
							<text class="time_word">{{item.startTime.substr(5,item.startTime.length-8)}}</text>
						</view>
					</block>
					
					<!-- 预约抢购 -->
					<block v-else>
						<!-- 已售罄 -->
						<view class="title colo_C5C5C5" v-if="item.sellStatus == 15 || item.sellStatus == 16">
							<image class="time_img" src="/static/index/index-time01.png" ></image>
							<text>已售罄</text>
						</view>
						
						<view class="title colo_E6C935" v-else-if="item.sellStatus == 5">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<block v-if="item.subscribeEnable == 1">
								<text>即将开放预约</text>
								<text class="time_word" >{{item.startTime.substr(5,11)}}</text>
							</block>
							<block v-else>
								<text>敬请期待</text>
								<text class="time_word" >{{item.whiteStartBuyTime.substr(5,11)}}</text>
							</block>
	
						</view>
						
						<view class="title colo_F61616" v-else-if="item.sellStatus == 8">
							<image class="time_img" src="/static/index/index-fire.png" ></image>
							<text>火爆预约中</text>
						</view>
						<view class="title colo_E6C935" v-if="item.sellStatus == 10 ">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<text>敬请期待</text>
							<text class="time_word">{{item.whiteStartBuyTime.substr(5,11)}}</text>
						</view>
						<view class="title colo_E6C935" v-if="item.sellStatus == 12 ">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<text>敬请期待</text>
							<text class="time_word">{{item.startBuyTime.substr(5,11)}}</text>
						</view>
						<!-- 热销中 -->
						<view class="title colo_F61616" v-else-if="item.sellStatus == 11 || item.sellStatus == 13">
							<image class="time_img" src="/static/index/index-fire.png" ></image>
							<text>热销中</text>
						</view>
					</block>
					
					<view class="identification" :class="{'identification_no':item.merchantIcon == ''}">
						<image :src="item.merchantIcon" v-if="item.merchantIcon != ''"></image>
						<text>{{item.merchantName}}</text>
					</view>
				</view>
				<view class="li_lable">
					<view class="lable_item lable_xuanzhang" v-if="item.functionType==2">
						<image src="/static/index/label04.png" mode="widthFix"></image>
						<text class="lable_name ellipseHide">勋章NFR</text>
					</view>
					<view class="lable_item lable_equity" v-if="item.functionType==1">
						<image src="/static/index/quanyi.png" mode="widthFix"></image>
						<text class="lable_name ellipseHide">权益NFR</text>
					</view>
					<view class="lable_item lable_suanli" v-if="item.hashRate!=0">
						<image src="/static/index/suanli.png" mode="widthFix"></image>
						<text class="lable_name ellipseHide">算力:{{item.hashRate}}</text>
					</view>
					<block v-if="item.equityCardTagList.length>0">
<!-- 						<view class="lable_grade" :style="{'background':'url('+nav.img+') no-repeat','backgroundSize':'100% 100%'}" v-for="(nav,zIndex) in item.equityCardTagList" :key="zIndex">
							<text class="lable_name ellipseHide">{{nav.name}}</text>
						</view> -->
						<view class="lable_grade_box" v-for="(nav,zIndex) in item.equityCardTagList" :key="zIndex">
							<image :src="nav.img"  mode=""></image>
							<view class="lable_item lable_grade">
								<text class="lable_name ellipseHide">{{nav.name}}</text>
							</view>
						</view>
					</block>
					<!-- <view class="lable_item lable_grade">
						<image src="/static/index/label03.png" mode="widthFix"></image>
						<text class="lable_name ellipseHide">等级 SSR</text>
					</view> -->
				</view>
				<view class="li_info">
					<view class="name">{{item.cardName}}</view>
					<view class="price">
						<text>￥</text>{{item.price}}
					</view>
					<view class="quantity">
						<view class="quantity_left">
							<text class="left_01">限量</text>
							<text class="left_02">{{item.issueInventory}}份</text>
						</view>
						
						<!-- 直接购买 -->
						<block v-if="item.issueType == 1">
							<!-- 已售罄 -->
							<view class="quantity_right" v-if="item.sellStatus == 4">
								<view class="q_order q_end">
									已售罄
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.sellStatus == 2">
								<view class="q_order">
									立即抢购
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.sellStatus==1 && item.time.timeStatus">
								<view class="right_box right01">即将开售</view>
								<view class="right_box right02">
									<image class="right_sd" src="/static/index/index-sd.png" mode="widthFix">
									</image>
									<uni-countdown @timeup=timeup(item.sellStatus,index) :fontSize="12"
										:show-day="false" color="#FFFFFF" splitorColor="#FFFFFF"
										:hour="item.time.hours" :minute="item.time.minutes"
										:second="item.time.seconds"></uni-countdown>
									<!-- <text>23:59:00</text> -->
								</view>
							</view>
							<!-- 敬请期待 -->
							<view class="quantity_right" v-else-if="item.sellStatus==1 && item.time.timeStatus == false">
								<view class="coming_soon">
									敬请期待
								</view>
							</view>
							
						</block>
						<!-- 预约申购 -->
						<block v-else-if="item.issueType == 2">
							<!-- 已结束 -->
							<view class="quantity_right" v-if="item.endStaus">
								<view class="q_order q_end">
									已结束
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.draw">
								<view class="q_order">
									正在抽签
								</view>
							</view>
							<!-- 立即预约 -->
							<view class="quantity_right" v-else-if="item.sellStatus == 6">
								<view class="q_order">
									立即预约
								</view>
							</view>
							<!-- 敬请期待 -->
							<view class="quantity_right" v-else-if="item.sellStatus==5 && item.time.timeStatus == false">
								<view class="coming_soon">
									敬请期待
								</view>
							</view>
							<!-- 即将开放预约 -->
							<view class="quantity_right" v-else-if="item.sellStatus==5 && item.time.timeStatus">
								<view class="right_box right01">即将开放预约</view>
								<view class="right_box right02">
									<image class="right_sd" src="/static/index/index-sd.png" mode="widthFix">
									</image>
									<uni-countdown @timeup=timeup(item.sellStatus,index) :fontSize="12"
										:show-day="false" color="#FFFFFF" splitorColor="#FFFFFF"
										:hour="item.time.hours" :minute="item.time.minutes"
										:second="item.time.seconds"></uni-countdown>
								</view>
							</view>
						</block>
						
						<block v-else>
							<!-- 已结束 -->
							<view class="quantity_right" v-if="item.sellStatus == 5">
								<view class="q_order q_class01">
									未开放预约
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.sellStatus == 8 && item.isSubscribe">
								<view class="coming_soon">
									预约成功
								</view>
							</view>
							<!-- 立即预约 -->
							<view class="quantity_right" v-else-if="item.sellStatus == 8">
								<view class="q_order">
									立即预约
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.sellStatus == 9">
								<view class="coming_soon">
									白名单待公布
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.sellStatus == 10 || item.sellStatus == 12">
								<view class="coming_soon">
									等待抢购
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.sellStatus == 11 && !item.isWhite">
								<view class="q_order q_class01">
									无抢购资格
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.sellStatus == 11 || item.sellStatus == 13">
								<view class="q_order">
									立即抢购
								</view>
							</view>
							<view class="quantity_right" v-else-if="item.sellStatus == 14">
								<view class="q_order q_class01">
									抢购结束
								</view>
							</view>
							<view class="quantity_right" v-if="item.sellStatus == 15 || item.sellStatus == 16">
								<view class="q_order q_end">
									已售罄
								</view>
							</view>
	
						</block>
						
					</view>
				</view>
			</view>
		
		</block>
	
		<block v-else>
			<view class="no_info">
				<image src="/static/index/commodity_no.png" mode="widthFix"></image>
				<text>暂无商品</text>
			</view>
		</block>
		<uni-popup ref="popup" >
			<view class="popup-box">
				<view class="popup-title">
					提示
				</view>
				<view class="popup-content" >
					该卡已下架
				</view>
				<view class="popup-button" @click="markClose">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  dataList:[],
			  pageSize: 10, //每页记录数
			  pageNum: 1, //当前页码
			  listTotal: 0, //列表总数
			}
		},
		onLoad() {
			this.getYoList()
		},
		methods: {
			// 初始化参数
			initialization(){
				this.pageNum = 1
				this.listTotal = 0
				this.dataList = []
				this.getYoList()
			},
			// 精选yo卡列表
			async getYoList() {
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				const res = await this.$api.getYoList(data);
				// console.log(res)
				this.listTotal = res.result.total
				var elData = res.result.records
				if(elData && elData.length > 0) {
					elData = elData.map(el => {
						el.time = _this.timeQuantum(el.startTime)
						// el.paytimestatus = _this.paytimeQuantum(el.payTime)
						el.drawSaleStatus = this.drawfunc(el.startTime,el.endTime)
						if (el.issueType == 1) {
							el.draw == false
							el.endStaus = _this.paytimeQuantum(el.endTime)  //是否已结束 
							
						} else {
							el.endStaus = _this.paytimeQuantum(el.executeTime)  //是否已结束 
							el.draw = this.drawfunc(el.endTime, el.executeTime)
						}
						return el;
					})
				}
			
				if (this.pageNum > 1) {
					this.dataList = this.dataList.concat(elData); //将数据拼接在一起
				} else {
					this.dataList = elData
				}
				// console.log(this.dataList)
			},
			// 判定时间当前时间 是否在该时间段
			drawfunc(endTime, executeTime) {
				if (new Date(endTime.replace(/-/g, '/')) < new Date() && new Date(executeTime.replace(/-/g, '/')) >
					new Date()) {
					return true
				} else return false
			},
			//计算两个时间之间的时间差 多少天时分秒
			timeQuantum(time) {
				time = new Date(time.replace(/-/g, '/')); //获取传入时间 并将其转化为date型
				var nowTime = new Date(); //获取当前时间
				var timeDifference = time.getTime() - nowTime.getTime(); //时间差的毫秒数
				// console.log(time.getTime() +'===='+nowTime.getTime())
				var total = timeDifference / 1000; //相差的秒数;
				// var endTime = parseInt(total / ()); //计算是否超过24小时;
			
				if (total > (60 * 60 * 24) || total <= 0) {
					return {
						timeStatus: false
					};
				} else {
					var days = Math.floor(timeDifference / (24 * 3600 * 1000)); //计算出相差天数
					var leave1 = timeDifference % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
					var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
					var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
					var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
					var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
					var seconds = Math.round(leave3 / 1000); //计算相差秒数
					var data = {
						days: days,
						hours: hours,
						minutes: minutes,
						seconds: seconds,
						timeStatus: true
					}
					return data;
				}
			},
			timeup(status, index) {
				if (status == 1) {
					this.dataList[index].sellStatus = 2
				} else if (status == 5) {
					this.dataList[index].sellStatus = 6
				}
			},
			// 详情转跳
			async jumpDetails(item) {
				var res = await this.$api.equityCardIsShelves(item.id)	
				if(res.result){
					uni.navigateTo({
						url: '/pages/index/card-details/card-details?id=' + item.id
					})
				}else{
					this.$refs.popup.open()
				}
				// console.log(res)
			},
			async markClose(){
				this.initialization()
				this.getYoList()
				this.$refs.popup.close()
				
			},
			paytimeQuantum(paytime) {
				if (paytime != null) {
					paytime = new Date(paytime.replace(/-/g, '/')); //获取传入时间 并将其转化为date型
					var nowTime = new Date(); //获取当前时间
					var timeDifference = paytime.getTime() - nowTime.getTime(); //时间差的毫秒数				
					if (timeDifference < 0) {
						return true
					}
					return false
				} else {
					return false
				}
			
			},
			  
		},
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum < Math.ceil(this.listTotal / this.pageSize)) {
				this.pageNum++; //每触底一次 page + 1;
				this.getYoList()
			} 
		}
	}
</script>

<style scoped>
	.yoyo_cards{
		padding-bottom: 100rpx;
	}
	.no_info {
		padding-top: 188rpx;
	}
	.selected_li {
		width: 690rpx;
		/* min-height: 656rpx; */
		box-shadow: 0px 0px 20rpx #EDEDED;
		background: url('@/static/index/index_bj.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		border-radius: 24rpx;
		padding: 28rpx;
		box-sizing: border-box;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}
	
	.li_header {
		position: relative;
		margin-bottom: 56rpx;
	}
	
	.li_header .header_img {
		width: 630rpx;
		height: 376rpx;
		border-radius: 24rpx;
		will-change: transform;
	}
	
	.li_header .title {
		position: absolute;
		top: 22rpx;
		left: 22rpx;
		display: inline-flex;
		align-items: center;
		flex-direction: row;
		padding: 0 16rpx;
		font-size: 24rpx;
		height: 42rpx;
		background: #000000;
		opacity: 0.6;
		border-radius: 200rpx;
	}
	
	.li_header .title .time_img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
	
	.li_header .title .time_word {
		margin-left: 10rpx;
	}
	
	.colo_E6C935 {
		color: #E6C935;
	}
	
	.colo_F61616 {
		color: #F61616;
	}
	.colo_C5C5C5 {
		color: #C5C5C5;
	}
	.identification {
		position: absolute;
		/* width: 334rpx;
		height: 60rpx; */
		padding: 10rpx 32rpx;
		white-space: nowrap;
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #222222;
		font-size: 26rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 12rpx #F1F1F1;
		border-radius: 200rpx;
		bottom: -30rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.identification_no{
		padding: 12rpx 32rpx;
	}
	.identification image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 14rpx;
	}
	
	.identification text {
		display: inline-block;
		max-width: 480rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.li_info {
		/* margin-top: 50rpx; */
	}
	
	.li_info .name {
		font-size: 32rpx;
		color: #222222;
	}
	
	.li_info .price {
		font-weight: 700;
		font-size: 46rpx;
		color: #222222;
		margin-top: 14rpx;
	}
	
	.li_info .price text {
		font-weight: 400;
		font-size: 34rpx;
	}
	
	.quantity {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	
	.quantity_left text {
		padding: 0 14rpx;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 30rpx;
	}
	
	.quantity_left .left_01 {
		color: #926300;
		background: #FBE6BA;
		border-radius: 4rpx 0 0 4rpx;
	}
	
	.quantity_left .left_02 {
		color: #BC8000;
		background: #FFF9EB;
		border-radius: 0px 4rpx 4rpx 0px;
	}
	
	.quantity_right {
		color: #FFFFFF;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
	
	}
	
	/* 即将开售 */
	.quantity_right .right01 {
		padding: 8rpx 16rpx;
		background: linear-gradient(90deg, #494949 1.83%, #363231 102.44%);
		border-radius: 4rpx 0px 0px 20rpx;
	
	}
	
	.quantity_right .right_sd {
		width: 24rpx;
		height: 48rpx;
		position: absolute;
		top: 0;
		left: -6rpx;
	}
	
	.quantity_right .right02 {
		position: relative;
		padding: 8rpx 18rpx 8rpx 28rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 0px 20rpx 4rpx 0px;
	}
	
	/* 敬请期待 */
	.quantity_right .coming_soon {
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
		font-size: 24rpx;
		min-width: 180rpx;
		height: 48rpx;
		border-radius: 200rpx;
		border: 2rpx solid #0B87F2;
		line-height: 48rpx;
		text-align: center;
	}
	
	/* 立即预约 */
	.quantity_right .q_order {
		width: 166rpx;
		height: 48rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
	}
	.quantity_right .q_end {
		background: #ADADAD;
	}
	.quantity .q_class01{
		background: linear-gradient(89.93deg, #82C0FB 0.06%, #A099FB 99.94%);
	}
	/* 已结束 */
	
	/* 标签页 */
	.li_lable{
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: row; */
		/* margin-top: 48rpx; */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}
	.lable_item{
		position: relative;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
		padding-left: 30rpx;
		padding-right: 10rpx;
		/* padding: 4rpx 10rpx 4rpx 26rpx; */
		box-sizing: border-box;
		min-width: 126rpx;
		max-width: 280rpx;
		height: 36rpx;
		margin-bottom: 20rpx;
		line-height: 36rpx;
	}
	.lable_item image{
		position: absolute;
	}

	.lable_xuanzhang image{
		top: -7rpx;
		left: -20rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.lable_xuanzhang {
		margin-left: 10rpx;
		background: linear-gradient(90deg, #FF8540 4.62%, #FF4926 105.38%);
		border-radius: 0rpx 200rpx 200rpx 0rpx;
		/* background: url('/static/index/lable_bg01.png') no-repeat;
		background-size: 100% 100%; */
	}
	
	.lable_equity image{
		top: -6rpx;
		left: -23rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.lable_equity {
		margin-left: 25rpx;
		/* background: url('/static/index/lable_bg02.png') no-repeat;
		background-size: 100% 100%; */
		background: linear-gradient(90deg, #5C4117 4.62%, #2D3332 105.38%);
		border-radius: 0rpx 200rpx 200rpx 0rpx;
	}
	.lable_grade_box{
		position: relative;
		margin-left: 16rpx;
		height: 38rpx;
	}
	.lable_grade_box image{
        width: 138rpx;
        height: 38rpx;
    }
	.lable_grade image{
		height: 36rpx;
		position: absolute;
		top: 0;
		/* top: -5rpx;
		left: -24rpx;
		width: 44rpx;
		height: 44rpx; */
	}
/* 	.lable_grade {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
		padding-left: 46rpx;
		padding-right: 14rpx;
		box-sizing: border-box;
		min-width: 126rpx;
		max-width: 280rpx;
		height: 36rpx;
		margin-bottom: 20rpx;
		line-height: 36rpx;
	} */
	.lable_grade{
		position: absolute;
		top: 0;
		margin-left: 12rpx;

	}
	.lable_suanli image{
		top: -5rpx;
		left: -24rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.lable_suanli{
		margin-left: 36rpx;
		background: linear-gradient(90deg, #9D5AFF 4.62%, #4F56FF 105.38%);
		border-radius: 0rpx 200rpx 200rpx 0rpx;
	}
	/* end */
	
	/* 弹窗信息 */
	.popup-box{
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-title{
		padding-top: 40rpx;
		padding-bottom: 34rpx;
		font-weight: 400;
		font-size: 38rpx;
		color: #000000;
	}
	.popup-content{
	    width: 460rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 30rpx;
		line-height: 40rpx;
		color: #333333;
	}
	.popup-button{
		border-top:2rpx solid #f0f0f0;
		width: 100%;
		margin-top: 40rpx;
		text-align: center;
		padding-top: 20rpx;
		font-weight: 400;
		font-size: 34rpx;		
		color: #0B87F2;
	}
	/* end */
</style>
